<template>
  <div class="container">
    <div class="col-1">
      <div>
        <div class="h1">{{ schoolName }}</div>
        <div class="h3">{{ systemName }}</div>
      </div>
    </div>
    <!-- 用户登录组件 -->
    <loginForm ref="loginForm" />
  </div>
</template>

<script>
import loginForm from "@/components/loginCopy.vue";
import { getCurrentInstance } from "vue";

export default {
  name: "LoginView",
  components: { loginForm },
  setup() {
    const instance = getCurrentInstance()
    let schoolName = instance.appContext.config.globalProperties.$schoolName
    let systemName = instance.appContext.config.globalProperties.$systemName
    let showQrCode = instance.appContext.config.globalProperties.$showQrCode

    return { schoolName: schoolName, systemName: systemName, showQrCode: showQrCode }
  },
  data() {
    return {
    };
  },
  mounted() {
    this.$refs.loginForm.showQrCode = this.showQrCode;
    this.$refs.loginForm.isShow = this.showQrCode;
    this.$refs.loginForm.getState();
    this.$refs.loginForm.init();
    this.$refs.loginForm.open();
    this.$refs.loginForm.createQrcode();
    this.$refs.loginForm.loginWx();
  },
  methods: {},
};
</script>

<style >
.h1 {
  font-size: 36px;
  text-align: center;
}

.h3 {
  font-size: 20px;
  color: #444444;
  padding: 10px;
  text-align: center;
}

@media only screen and (max-width: 1024px) {
  body {
    margin: 0;
    background: url(../assets/login-background-mobile.png) no-repeat;
    background-size: cover;
  }

  .col-1 {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 100%;
  }

  .container {
    padding-top: 40px;
  }
}

@media only screen and (min-width: 1024px) {
  body {
    margin: 0;
    background: url(../assets/login-background.png) no-repeat;
    background-size: cover;
  }

  .col-1 {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 60%;
  }

  .container {
    display: flex;
    padding-top: 100px; 
  }
}
</style>
